<template>
<div class="content">
  <view class="search-classify">
    <view class="classify-type-btn">
    <a class="type-btn" @tap="clickDemo">类型</a></li>
    </view>
    <view class="classify-search-input">
      <input class="input-text" type="text"></view>
  </view>
  <view class="goods-list">
    <ul v-if="items.length>0">
      <li v-for="item in items" class="goods-item">
        <text>No:{{item.name}}=</text><text>:{{item.value}}</text>
      </li>
    </ul>
    <ul v=else class="not-found">
      <li>
    <p>Not Found!</p>
      </li>
  </ul>
  </view>
</div>
</template>
<script>
import network from '@/utils/network.js'
export default {
  data() {
    return {
      items: [],
      options: {},
      hasMore: true, //加载更多
      pickerValueArray: ['住宿费', '礼品费', '活动费', '通讯费', '补助'],
      pickerValueDefault: [1]
  };
  },
  methods: {
    clickDemo:function(e){
       console.log(e);
    },
    //更多加载
    loadMore() {
      this.loadGoodsList()
    },
    //请求商品列表
    loadGoodsList() {
      network.GET(this.option).then(result => {
        //判断返回数组是否为空
        if (result.data && result.data.length > 0) {
          this.items = result.data;
          console.log('it is true!');
        } else {
          console.log('else is false');
        }

      })
    }
  },
  //初始化页面加载
  onLoad() {
    wx.setNavigationBarTitle({
      title:'首页'
    });
    this.option = {
      url: 'data',
      data: 'data'
    };
    // this.loadGoodsList();
  }

}
</script>

<style scoped>
  /* @import '../../static/iconfont/iconfont.css' */
page {
  margin: 0;
  padding: 0;
  border:1px solid black;
}

.content {
  width: 98%;
  margin: 20px auto;
  /* border:1rpx solid red; */
}
.content .search-classify{
  margin:0 auto;
  width:100%;
  height:36px;
  /* border:1px solid black; */
  display: flex;
  flex-direction: row;
}

.content .search-classify .classify-type-btn{
  width:20%;
  height:inherit;
  border:1rpx solid grey;
  border-right: none;
  text-align: center;
}
.content .search-classify .classify-search-input{
  width:80%;
  height:inherit;
  border:1rpx solid grey;
  text-align: center;
}
.content .search-classify .classify-type-btn .type-btn{
  display: flex;
  height:inherit;
  align-items: center;
  justify-content: center;

}
.content .search-classify .classify-search-input .input-text{
  width:100%;
  height:inherit;
}
.content .goods-list{
  margin-top:30px;
}
.content .goods-list .not-found{
  margin:100rpx auto;
}
.content .goods-list .not-found li,.content .goods-list .not-found li p{
  text-align: center;
}
</style>
